<template>
  <div>
    <el-card shadow="never" body-style="padding:24px;">
      <div style="margin-top: 16px; padding-bottom: 8px;border-bottom: 1px solid #dadcde;">
        <el-row type="flex" justify="space-between">
          <el-col :span="12">
            <div class="condition-title" style="line-height: 32px;">{{$t("message.filterCondition")}}</div>
          </el-col>
          <el-col :span="12">
            <div class="float-right" style="margin-left: 14px">
              <el-button @click="reset">{{$t("message.reset")}}</el-button>
              <el-button @click="search" type="primary">{{$t("message.filter")}}</el-button>
            </div>
            <div class="float-right">
              <el-form :model="condition" label-width="50px" ref="conditionForm">
                <el-form-item :label="$t('label.grade') + ':'" prop="grade">
                  <el-date-picker v-model="condition.grade" value-format="yyyy" align="right" type="year"
                    :placeholder="$t('common.pla.pleaseSelect')" clearable style="width: 100%" />
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 24px" v-if="courseTableDataShow">
        <div style="margin-bottom:12px;" class="courseTableData">
          <el-row type="flex" justify="space-between">
            <el-col :span="8">
              <div class="condition-title" style="line-height: 32px;">
                <span>{{$t("auditStandard.internationalStudentCourseCredits")}}:</span>
                <span>&nbsp;{{totalCredits}}</span>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="float-right">
                <el-button type="primary" @click="addCourseGroup">{{$t("auditStandard.addCourseGroup")}}</el-button>
                <el-button type="danger" @click="deleteCourseGroup(true)">{{$t("auditStandard.deleteCourseGroup")}}
                </el-button>
                <el-button type="primary" @click="addCourse">{{$t("auditStandard.addTheCourse")}}</el-button>
              </div>
            </el-col>
          </el-row>
          <el-table :data="courseTableData" border :header-cell-style="headerCellStyle"
            @selection-change="handleSelectionChange" :span-method="mergeSpanMethod" style="width: 100%;">
            <el-table-column type="selection" width="40" align="center" @selection-change="handleSelectionChange">
            </el-table-column>
            <el-table-column align="left" :label="$t('auditStandard.courseGroupName')" min-width="100"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="!scope.row.isNotShowTable">{{scope.row.groupName}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('auditStandard.courseGroupCredits')" min-width="100">
              <template slot-scope="scope">
                <div v-if="!scope.row.isNotShowTable">
                  <el-input v-model="scope.row.credits" type="number" min="0" style="width: 100%"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('auditStandard.courseTitle')" min-width="150">
              <template slot-scope="scope">
                <div v-if="scope.row.defineCourseAttr">{{scope.row.defineCourseAttr.courseName}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('auditStandard.classNumber')">
              <template slot-scope="scope">
                <div v-if="scope.row.defineCourseAttr">{{scope.row.defineCourseAttr.courseCode}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('auditStandard.startCollege')" min-width="120">
              <template slot-scope="scope">
                <div v-if="scope.row.defineCourseAttr">{{scope.row.defineCourseAttr.collegeI18n}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('auditStandard.courseCredits')">
              <template slot-scope="scope">
                <div v-if="scope.row.defineCourseAttr">{{scope.row.defineCourseAttr.credits}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('common.text.operation')">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" size="mini" @click.stop="operate(scope.row)">{{$t('common.btn.delete')}}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="float-right" style="margin-top: 16px;">
            <el-button @click="confirm" type="primary">{{$t("message.confirm")}}</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <div v-if="addCourseGroupDialog.show">
      <!-- 添加课程组 -->
      <add-student-course-group :show.sync='addCourseGroupDialog.show' :condition="condition">
      </add-student-course-group>
    </div>
    <div v-if="addCourseDialog.show">
      <!-- 添加课程 -->
      <add-student-course :show.sync='addCourseDialog.show' :condition="condition"></add-student-course>
    </div>
  </div>

</template>
<script>
  import {
    getCourseGroupList,
    delCourse,
    deleteCourseGroup,
    editGroupCredit
  } from 'common/src/api/graduationManagement/interStudentManage';

  export default {
    data() {
      return {
        condition: {
          grade: '',
          type: '0',
          isOverseas: '1'
        },
        courseTableDataShow: false,
        courseTableData: [],
        cacheData: [],
        addCourseGroupDialog: {
          show: false
        },
        addCourseDialog: {
          show: false
        }
      }
    },
    created() {},
    methods: {
      reset() {
        this.$refs.conditionForm.resetFields();
        this.courseTableDataShow = false;
        this.courseTableData = [];
        this.cacheData = [];
      },
      search() {
        this.getStandard();
      },
      getStandard() {
        this.checkList = null;
        if (this.condition.grade) {
          let params = {
            ...this.condition
          };
          getCourseGroupList(params).then(res => {
            this.courseTableData = [];
            this.cacheData = [];
            if (res && res.code === 200) {
              this.handleData(res.data);
            }
          }).catch(() => {
            this.courseTableData = [];
            this.cacheData = [];
          }).finally(() =>{
            this.courseTableDataShow = true;
          });
        } else {
          this.courseTableDataShow = false;
          this.$message({
            message: this.$t('auditStandard.selectGradeTip'),
            type: 'warning'
          });
          this.courseTableData = [];
          this.cacheData = [];
        }
      },
      handleData(data) {
        if (!data && !data.length) {
          return;
        }
        this.cacheData = _.cloneDeep(data);
        let list = [];
        data.forEach(item => {
          if (item.internationalCourseList && item.internationalCourseList.length) {
            item.internationalCourseList.forEach((spec, index) => {
              if (index) {
                list.push({
                  defineCourseAttr: spec,
                  isNotShowTable: true
                });
              } else {
                item.defineCourseAttr = spec;
                list.push(item);
              }
            })
          } else {
            list.push(item);
          }
        });
        this.courseTableData = list;
      },
      headerCellStyle() {
        return "background: #f4f7fa";
      },
      addCourseGroup() {
        this.addCourseGroupDialog.show = true;
      },
      deleteCourseGroup(isMultiCheck, id) {
        let param = {};
        if (isMultiCheck) {
          if (!this.checkList || !this.checkList.length) {
            this.$message({
              message: this.$t('auditStandard.selectDeleteCourseGroupTip'),
              type: 'warning'
            });
            return;
          }
          param.ids = this.checkList;
        } else {
          param.ids = [id];
        }
        param.isOverseas = this.condition.isOverseas;
        deleteCourseGroup(param).then(res => {
          this.$message({
            message: this.$t('auditStandard.deleteCourseGroupSuccessTip'),
            type: 'success'
          });
          this.getStandard();
        }).catch(error => {
          if (error && error.message) {
            this.$message({
              message: error.message,
              type: 'error'
            });
          }
        })
      },
      addCourse() {
        this.addCourseDialog.show = true;
      },
      operate(row) {
        if (row.defineCourseAttr) {
          let param = {
            id: row.defineCourseAttr.id,
            isOverseas: this.condition.isOverseas
          }
          delCourse(param).then(res => {
            if (res && res.code === 200) {
              this.$message({
                message: this.$t('auditStandard.deleteCourseSuccessTip'),
                type: 'success'
              });
              this.getStandard();
            }
          }).catch(error => {
            if (error && error.message) {
              this.$message({
                message: error.message,
                type: 'error'
              });
            }
          })
        } else {
          // 删除课程组
          this.deleteCourseGroup(false, row.id);
        }
      },
      confirm() {
        let param = [];
        this.cacheData.forEach(originItem => {
          let itemCreditChanged = false;
          let findSelfItem = this.courseTableData.find(spec => {
            return spec.id === originItem.id;
          });
          if (findSelfItem) {
            if (findSelfItem.credits !== originItem.credits) {
              param.push({
                id: findSelfItem.id,
                credits: findSelfItem.credits,
                isOverseas: this.condition.isOverseas
              })
            }
          }
        })
        if (param.length) {
          editGroupCredit(param).then(res => {
            if (res && res.code === 200) {
              this.$message({
                message: this.$t('auditStandard.courseGroupEditSuccessTip'),
                type: 'success'
              });
              this.getStandard();
            }
          }).catch(error => {
            if (error && error.message) {
              this.$message({
                message: error.message,
                type: 'error'
              });
            }
          })
        }
      },
      handleSelectionChange(selectData) {
        this.checkList = [];
        if (selectData && selectData.length) {
          let ids = [];
          selectData.forEach(item => {
            if (!item.isNotShowTable) {
              ids.push(item.id);
            };
          });
          this.checkList = ids;
        }
      },
      mergeSpanMethod({
        row,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
          if (row.isNotShowTable) {
            return {
              rowspan: 0,
              colspan: 0
            }
          } else {
            if (row.internationalCourseList && row.internationalCourseList.length) {
              return {
                rowspan: row.internationalCourseList.length,
                colspan: 1
              }
            }
          }
        }
      }
    },
    components: {
      addStudentCourseGroup: resolve => require(['./addInterStudentCourseGroup.vue'], resolve),
      addStudentCourse: resolve => require(['./addInterStuCourse.vue'], resolve),
    },
    computed: {
      totalCredits() {
        let total = 0;
        this.courseTableData.forEach(item => {
          if (item.credits) {
            total += Number(item.credits)
          }
        });
        return total;
      }
    },
  }

</script>
<style scoped lang="scss"></style>
